<template>
  <view class="main">
    <uni-nav-bar title="设置" fixed :border="false" height="88rpx" statusBar background-color="#2979ff"
      color="#fff"></uni-nav-bar>
    <view class="content">
      <view class="logo" @click="goLogin">
        <view class="pic">
          <image class="logo-img" src="/static/my/user.png"></image>
        </view>
        <view class="logo-title" v-if="!login">
          <text class="uer-name">Hi，您未登录</text>
        </view>
        <view class="logo-title" v-else>
          <text class="uer-name">姓名：{{ user.employeeName }}【{{ codeName }}】</text>
          <text class="account">账号：{{ user.userName }}</text>
        </view>
      </view>

      <view class="center-list">
        <view class="center-list-item border-bottom" @click="() => { $navTo('/pages/userManager/storeInfo') }">
          <text class="list-icon">&#xe6c8;</text>
          <text class="list-text">门店信息</text>
          <text class="navigat-arrow">&#xe6e0;</text>
        </view>
        <view class="center-list-item border-bottom" @click="() => { $navTo('/pages/userManager/userManager') }">
          <text class="list-icon">&#xe62e;</text>
          <text class="list-text">员工管理</text>
          <text class="navigat-arrow">&#xe6e0;</text>
        </view>
        <view class="center-list-item" @click="() => { $navTo('/pages/userManager/changePassword') }">
          <text class="list-icon">&#xe600;</text>
          <text class="list-text">修改密码</text>
          <text class="navigat-arrow">&#xe6e0;</text>
        </view>
      </view>
      <view class="center-list">
        <view class="center-list-item border-bottom" @click="() => { $navTo('/pages/userManager/about') }">
          <text class="list-icon">&#xe684;</text>
          <text class="list-text">关于裕酷</text>
          <text class="navigat-arrow">&#xe6e0;</text>
        </view>
        <view class="center-list-item" @click="() => { $navTo('/pages/userManager/merchantComplaint') }">
          <text class="list-icon">&#xe617;</text>
          <text class="list-text">商家投诉</text>
          <text class="navigat-arrow">&#xe6e0;</text>
        </view>
      </view>
      <view class="center-list">
        <view class="center-list-item" @click="onAPPUpdate">
          <text class="list-icon">&#xe634;</text>
          <text class="list-text">版本更新</text>
          <!-- <text class="navigat-arrow">v{{ version }}</text> -->
          <text class="navigat-arrow1">v{{ version }}&#xe6e0;</text>
        </view>
      </view>
      <view class="bottomFix" @click="reqLogout">
        <view class="btn">退出登录</view>
      </view>
    </view>
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog ref="inputClose" mode="input" title="退出登录" @confirm="submit" @close="close" before-close>
        <template>
          <view class="infoRemark">确认退出登录吗？</view>
        </template>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { reqStoreInfo } from '@/apis/user'
// #ifdef APP-PLUS
import APPUpdate, { getCurrentNo } from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
// #endif
export default {
  name: "My",
  data() {
    return {
      login: true,
      version: '', // 当前应用版本号
      user: {},
      codeName: ''
    }
  },
  onLoad() {
    // #ifdef APP
    // 获取app版本号
    getCurrentNo(res => { this.version = res.versionName });
    // #endif
  },
  onShow() {
    this.reqStoreInfo()
    this.codeName = this.$store.state.user.roleNameList[0]
  },
  methods: {
    async reqStoreInfo() {
      const res = await reqStoreInfo()
      if (res.code == 200) {
        // console.log('res', res);
        this.user = res.data.user
      }
    },
    onAPPUpdate() {
      // true 没有新版本的时候有提示，默认：false
      APPUpdate(true);
    },
    goLogin() {

    },
    reqLogout() {
      this.$refs.inputDialog.open();
    },
    submit() {
      this.$refs.inputDialog.close();
      this.$store.dispatch('user/userLogout').then(() => {
        this.$navTo('/pages/login/login');
      })
    },
    close() {
      this.$refs.inputDialog.close();
    }
  }
}
</script>
<style>
page {
  background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
@font-face {
  font-family: texticons;
  font-weight: normal;
  font-style: normal;
  src: url('/Font/iconfont.woff2') format('woff2'),
    url('/Font/iconfont.woff') format('woff'),
    url('/Font/iconfont.ttf') format('truetype');
}

.content {
  .logo {
    display: flex;
    align-items: center;
    color: #fff;
    background-color: $uni-main-bgColor;
    width: 750rpx;
    padding: 40rpx 20rpx;
    box-sizing: border-box;

    .pic {
      width: 150rpx;
      height: 150rpx;
      border-radius: 150rpx;
      margin-right: 40rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .logo-title {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 150rpx;
      padding: 20rpx 0;
      box-sizing: border-box;
    }
  }

  .center-list {
    background-color: #FFFFFF;
    margin-top: 20rpx;
    width: 750rpx;
    flex-direction: column;
  }

  .center-list-item {
    &:active {
      background-color: #f2f2f2 !important;
    }

    display: flex;
    align-items: center;
    height: 90rpx;
    width: 750rpx;
    box-sizing: border-box;
    flex-direction: row;
    padding: 0rpx 20rpx;
  }

  .border-bottom {
    border-bottom-width: 1rpx;
    border-color: #c8c7cc;
    border-bottom-style: solid;
  }

  .list-icon {
    width: 40rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 34rpx;
    color: #2979ff;
    text-align: center;
    font-family: texticons;
    margin-right: 20rpx;
  }

  .list-text {
    height: 90rpx;
    line-height: 90rpx;
    font-size: 34rpx;
    color: #555;
    flex: 1;
    text-align: left;
  }

  .navigat-arrow1 {
    width: 120rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 34rpx;
    color: #555;
    text-align: right;
    font-family: texticons;
  }

  .navigat-arrow {
    height: 90rpx;
    width: 40rpx;
    line-height: 90rpx;
    font-size: 34rpx;
    color: #555;
    text-align: right;
    font-family: texticons;
  }

  .bottomFix {
    width: 100%;
    display: flex;
    justify-content: center;

    .btn {
      width: 480rpx;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
      font-size: $uni-font-size-unBase;
      border: 1px solid #47a6ff;
      color: #555;
      margin-top: 80rpx;
      border-radius: 50rpx;
    }
  }
}
</style>